<template>
  <div class="head">
    <el-breadcrumb separator-class="el-icon-arrow-right" ref="el">
      <el-breadcrumb-item :to="path === '/dashboard' ? '' : '/'">
        首页
      </el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item, index) in breaArr" :key="index">{{
        item.title
      }}</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="right">
      <el-image
        style="width: 50px; height: 50px"
        :src="user.imgUrl"
        fit="cover"
      ></el-image>
      <el-dropdown @command="handleCommand" trigger="click" class="tic">
        <span class="el-dropdown-link">
          欢迎你，<span class="nick-name">{{ user.account }}</span>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="personal">个人中心</el-dropdown-item>
          <el-dropdown-item command="logout">退出系统</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import store from '@/util/storeManage.js'
import { alterSuccess } from '@/util/msgTips'
export default {
  data () {
    return {
      size: 50,
      tags: [
        { name: '标签一', type: '' },
        { name: '标签二', type: 'success' },
        { name: '标签三', type: 'info' },
        { name: '标签四', type: 'warning' },
        { name: '标签五', type: 'danger' }
      ]
    }
  },
  methods: {
    handleCommand (name) {
      if (name === 'personal') {
        // 个人中心界面
        this.$router.push({ path: '/user/info' })
      } else {
        // 退出登入
        alterSuccess('退出成功!')
        store.del('t_k')
        setTimeout(() => {
          this.$router.go(0)
        }, 1500)
      }
    }
  },
  props: {
    path: {
      type: String,
      default: '',
      require: true
    },
    tit: {
      type: String,
      default: '',
      require: true
    },
    breaArr: {
      type: Array,
      default: () => [],
      require: true
    },
    user: {
      type: Object,
      default: () => {},
      require: true
    }
  }
}
</script>

<style lang="less" scoped>
.head {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .right {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
  }
}
.el-breadcrumb {
  display: flex;
  height: 100%;
  align-items: center;
}
.el-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 20px;
}

.nick-name {
  color: orangered;
  font-weight: bold;
}

.tic {
  user-select: none;
  cursor: pointer;
}
</style>
